<template>
  <div class="custom-tree-container">
    <div class="block">
      <p>web系统菜单管理</p>
      <el-tree
        :span="12"
        :data="menuData"
        node-key="wm_code"
        :default-expanded-keys="config.defaultOpen"
        :default-checked-keys="config.defaultOpen"
        :expand-on-click-node="false"
        :props="config.defaultProps"
      >

        <span class="custom-tree-node" slot-scope="{ node, data }">
        
          <span>{{ data.wm_name }}</span>
          <span>
            <el-button
              type="text"
              size="mini"
              @click="() => addShow(data, node)"
            >
              添加子菜单
            </el-button>
            <el-button type="text" size="mini" @click="() => updateShow(data)">
              编辑当前菜单
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="() => remove(node, data)"
            >
              删除当前菜单
            </el-button>
          </span>
        </span>
      </el-tree>
    </div>

    <el-dialog
      :title="config.editType == 1 ? '模块添加' : '模块修改'"
      :visible.sync="config.isShowEdit"
    >
      <el-form ref="form" :model="menuInfo" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="菜单Code"
              :prop="config.editType == 1 ? 'wm_code' : ''"
            >
              <el-input
                v-model="menuInfo.wm_code"
                :disabled="config.editType == 1 ? false : true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="wm_name">
              <el-input v-model="menuInfo.wm_name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="父菜单Code">
              <el-input
                v-model="menuInfo.wm_parent_code"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="父菜单名称">
              <el-input
                v-model="menuInfo.parentName"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label="菜单级别">
              <el-input v-model="menuInfo.wm_level" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="排序" prop="wm_order">
              <el-input v-model.number="menuInfo.wm_order"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="是否有效">
              <el-switch
                v-model="menuInfo.wm_status"
                active-text="是"
                inactive-text="否"
                active-value="1"
                inactive-value="2"
              ></el-switch>
              {{menuInfo.wm_status}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单url">
              <el-input v-model="menuInfo.wm_url"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="关联模块">
          <el-cascader
            v-model="menuInfo.wm_module_code"
            :options="module_options"
            :props="{
              checkStrictly: true,
              value: 'module_code',
              emitPath: false,
            }"
            clearable
          ></el-cascader>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="config.editType == 1 ? moduleAdd() : moduleUpdate()"
            >{{ config.editType == 1 ? "立即创建" : "修改保存" }}</el-button
          >
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
let id = 1000;

export default {
  data() {
    //modelcode唯一验证
    var vModuleCode = (rule, value, callback) => {
      console.log("a");
      if (!value) {
        return callback(new Error("菜单code不能是空的"));
      } else {
        this.$myaxios
          .get("WebSystemMenuManager/VMenuCode", {
            params: { wmc: this.menuInfo.wm_code },
          })
          .then((r) => {
            if (r.data) {
              callback();
            } else {
              callback(new Error("菜单Code已经被使用,请从重新输入菜单Code"));
            }
          });
      }
    };
    return {
      config: {
        //当前页面配置
        defaultOpen: [], //默认打开节点
        defaultProps: {
          //设置tree配置
          children: "sonWebSystemMenuViewList",
        },
        editType: 1, //编辑类型 1代表添加  2代表修改
        isShowEdit: false,
      },
      module_options: [], //模块数据
      menuData: [],
      menuInfo: {
        wm_code: "",
        wm_name: "",
        wm_order: -1,
        wm_status: 1,
        wm_module_code: '',
      },

      rules: {
        wm_code: [
          { validator: vModuleCode },
          { required: true, message: "请输入菜单Code" },
        ],
        wm_name: [{ required: true, message: "请输入菜单名称" }],
        wm_order: [
          { required: true, message: "排序不能为空" },
          { type: "number", message: "排序必须为数字" },
        ],
      },
    };
  },
  created() {
    this.iniMenuData();
  },

  methods: {
    iniMenuData() {
      this.$myaxios
        .get("WebSystemMenuManager/GetWebSystemMenuViewsAll")
        .then((r) => {
          this.menuData = r.data;
          if (r.data.length > 0) {
            this.config.defaultOpen.push(r.data[0].wm_code);
          }
        });
    },
    iniModuleCascader() {
      //初始化模块级联选择数据
      this.$myaxios.get("ModuleManager/GetModuleDbViewsAll").then((r) => {
        this.module_options = r.data;
      });
    },
    updateShow(data) {
      this.iniModuleCascader();
      //显示修改当前节点
      this.config.editType = 2;
      this.config.isShowEdit = true;
      this.$myaxios
        .get("WebSystemMenuManager/GetWebSystemMenuViewByCode", {
          params: { code: data.wm_code },
        })
        .then((r) => {
          this.menuInfo = r.data;
        });
    },
    moduleUpdate() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.$myaxios
            .post("WebSystemMenuManager/WSMUpdate", this.menuInfo)
            .then((r) => {
              if (r.data) {
                this.$message("修改成功");
                this.config.isShowEdit = false;
                this.config.editType = 1;

                this.iniMenuData();
                this.config.defaultOpen.push(this.menuInfo.wm_parent_code);
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    addShow(data, node) {
      //显示添加子节点    dataa参数代表点击的当前节点的数据
      this.iniModuleCascader();
      this.config.editType = 1;
      this.config.isShowEdit = true;
      this.menuInfo = {
        wm_parent_code: data.wm_code,
        parentName: data.wm_name,
        wm_level: data.wm_level + 1,
        wm_order: -1,
        wm_status: 1,
        wm_module_codes: [],
      }; 
  
    },

    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
    },

    moduleAdd() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          //  if(this.menuInfo.wm_module_codes&&this.menuInfo.wm_module_codes.length>0)this.menuInfo.wm_module_code=this.menuInfo.wm_module_codes[0]
          this.$myaxios
            .post("WebSystemMenuManager/WSMAdd", this.menuInfo)
            .then((r) => {
              if (r.data) {
                this.$message("添加成功");
                this.config.isShowEdit = false;
                this.iniMenuData();
                this.config.defaultOpen.push(this.menuInfo.wm_parent_code);
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>